<template>
	<view class="container">
		<view class="box" @click="onClick" :style="{background:color1}">{{num1}}</view>
		<view class="box" :style="{background:color2}">{{num2}}</view>
		<switch checked="true" @change="" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let num1 = ref(0)
	var color1 = ref('white')
	let num2 = ref(0)
	var color2 = ref('white')
	const onClick = () => {
		num1.value++
		color1.value = "#" + String(Math.random()).substring(2, 8)
		console.log(num1.value)
		console.log(color1.value)
	}
	var intervalID = setInterval(() => {
		if (num2.value <= 50) {
			num2.value++
			color2.value = "#" + String(Math.random()).substring(2, 8)
			console.log(num2.value)
			console.log(color2.value)
		}
		if (num2.value > 50) {
			num2.value = 0
			color2.value = 'white'
			clearInterval(intervalID)
			intervalID = null
		}
	}, 100)
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			width: 200rpx;
			height: 200rpx;
			border: 1px solid red;
			background: rgba(2, 3, 3, 0.1);
		}
	}
</style>